<template>
    <div class="pdf-preview">
        <div class="pdf-wrap">
            <vue-pdf-embed :source="state.source"  class="vue-pdf-embed" />
        </div>
</div>

</template>
<script setup lang="ts">
import VuePdfEmbed from "vue-pdf-embed";
import { reactive, onMounted, computed } from "vue";

const props = defineProps({
    pdfUrl: {
        type: String,
        required: true
    }
})


const state = reactive({
    source: props.pdfUrl, //预览pdf文件地址
});
onMounted(() => {
});

</script>
<style lang="css" scoped>
.pdf-preview {
    height: 96%;
    width: 96%;
    box-sizing: border-box;
    z-index: 99999999;
    overflow-y: auto;
    border-radius: 20px;
    border: 1px solid #E1E3E8;
    border-right: none;
    margin-left: 30px;
}

.pdf-wrap {
    overflow-y: auto;
}

.vue-pdf-embed {
    text-align: center;
    width: 95%;
    margin: 0 auto;
    box-sizing: border-box;
    border-radius: 20px;
}
::-webkit-scrollbar {
    width: 12px;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #F8F8F8;

}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #DFE1E8;
}

::-webkit-scrollbar-thumb:window-inactive {
    background: #DFE1E8;
}

</style>